var P9;
P9 = {
    init: function (className) {
        var targets = document.getElementsByClassName(className);
        for (var x = 0; x < targets.length; x++) {
            initElementP9(targets[x]);
        }

        function initElementP9(target) {
            var img = new Image();
            img.src = target.getAttribute("p9-src");
            img.onload = function () {
                //画板
                var canvas = document.createElement("canvas");
                canvas.width = target.offsetWidth;
                canvas.height = target.offsetHeight;
                //
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);//画背景
                var data = ctx.getImageData(0, 0, canvas.width, canvas.height);//获取像素点

                //记录x轴拉伸部分 start
                var scaleXAll = 0;
                var scaleX = {start: -1, end: -1};
                var scaleXs = new Array();
                for (var x = 0; x < canvas.width; x++) {
                    var a = data.data[x * 4 + 3];
                    if (a != 0 && scaleX.start == -1) {
                        scaleX.start = x;
                    } else if (a == 0 && scaleX.start != -1) {
                        scaleX.end = x;
                        scaleXs.push(JSON.parse(JSON.stringify(scaleX)))
                        scaleXAll += scaleX.end - scaleX.start;
                        scaleX.start = -1;
                        scaleX.end = -1;
                    }
                }
                var scaleXNum = (target.offsetWidth - img.width) / scaleXAll;//拉伸系数
                //记录x轴拉伸部分 end

                //记录y轴拉伸部分 start
                var scaleYAll = 0;
                var scaleY = {start: -1, end: -1};
                var scaleYs = new Array();
                for (var y = 0; y < canvas.height; y++) {
                    var a = data.data[y * canvas.width * 4 + 3];
                    if (a != 0 && scaleY.start == -1) {
                        scaleY.start = y;
                    } else if (a == 0 && scaleY.start != -1) {
                        scaleY.end = y;
                        scaleYs.push(JSON.parse(JSON.stringify(scaleY)))
                        scaleYAll += scaleY.end - scaleY.start;
                        scaleY.start = -1;
                        scaleY.end = -1;
                    }
                }
                var scaleYNum = (target.offsetHeight - img.height) / scaleYAll;//拉伸系数
                //记录y轴拉伸部分 end


                var scaleX = function () {
                    //开始变换x轴 start
                    var initX = 0;
                    var dataStart = ctx.getImageData(initX, 1, scaleXs[0].start, canvas.height);
                    for (var x in scaleXs) {
                        var dataScale = ctx.getImageData(scaleXs[x].start, 1, scaleXs[x].end, canvas.height);
                        var dataEnd;
                        var width = (scaleXs[x].end - scaleXs[x].start) * scaleXNum;
                        if (x == scaleXs.length - 1) {
                            dataEnd = ctx.getImageData(scaleXs[x].end, 1, canvas.width, canvas.height);
                        }
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        if (dataStart != undefined) {
                            ctx.putImageData(dataStart, initX, 0);
                            dataStart = undefined;
                        }

                        getImage(dataScale, scaleXs[x].end - scaleXs[x].start, canvas.height, function (img) {
                            ctx.drawImage(img, scaleXs[x].start, 0, width, canvas.height);
                            update();
                        })

                        initX = scaleXs[x].start + width;

                        if (x == scaleXs.length - 1) {
                            getImage(dataEnd, canvas.width - scaleXs[x].end, canvas.height, function (img) {
                                ctx.drawImage(img, initX, 0);
                                update();
                                scaleY();
                            })
                        }
                    }
                    //开始变换x轴 end
                }


                var scaleY = function () {
                    //开始变换y轴 start
                    var initY = 0;
                    var dataStart = ctx.getImageData(1, initY, canvas.width, scaleYs[0].start);
                    for (var x in scaleYs) {
                        var dataScale = ctx.getImageData(1, scaleYs[x].start, canvas.width, scaleYs[x].end);
                        var dataEnd;
                        var height = (scaleYs[x].end - scaleYs[x].start) * scaleYNum;
                        if (x == scaleYs.length - 1) {
                            dataEnd = ctx.getImageData(1, scaleYs[x].end, canvas.width, canvas.height);
                        }
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        if (dataStart != undefined) {
                            ctx.putImageData(dataStart, 0, initY);
                            dataStart = undefined;
                        }

                        getImage(dataScale, canvas.width, scaleYs[x].end - scaleYs[x].start, function (img) {
                            ctx.drawImage(img, 0, scaleYs[x].start, canvas.width, height);
                            update();
                        })

                        initY = scaleYs[x].start + height;

                        if (x == scaleYs.length - 1) {
                            getImage(dataEnd, canvas.width, canvas.width - scaleYs[x].end, function (img) {
                                ctx.drawImage(img, 0, initY);
                                update();
                            })
                        }
                    }
                    //开始变换y轴 end
                }

                var update = function () {
                    target.style.backgroundRepeat = "no-repeat";
                    target.style.backgroundImage = "url(" + canvas.toDataURL("image/png", 1) + ") ";
                }

                scaleX();

                update();
            }
        }

        function getImage(data, w, h, callback) {
            var newImage = new Image();
            var newCanvas = document.createElement("canvas");
            newCanvas.width = w;
            newCanvas.height = h;
            var newCtx = newCanvas.getContext("2d");
            newCtx.putImageData(data, 0, 0)
            newImage.src = newCanvas.toDataURL("image/png", 1);
            newImage.onload = function () {
                callback(newImage);
            }
        }
    }
}